<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2023-10-02 23:10:59
 * @LastEditors: yuxi
 * @LastEditTime: 2023-10-04 21:40:19
-->
<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-17 13:06:27
-->
<template>
  <div class="map-container">
    <MiningMap :useContextMenu="true" :customContextMenus="customContextMenus">
      <MiningTiandituLayer :ak="key" @ready="ready"></MiningTiandituLayer>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import { TiandituKey } from '@/config/config.js'

export default {
  name: 'MutiContextMenu',
  title: '多级右键菜单',
  parentTitle: '控件',
  components: {
    MiningMap,
    MiningTiandituLayer,
  },
  data() {
    return {
      key: TiandituKey,
      customContextMenus: [
        {
          name: '一级菜单',
          children: [
            {
              name: '二级菜单',
              children: [
                {
                  name: '三级菜单',
                  handler: () => {
                    this.$message.success('点击三级菜单')
                  },
                },
              ],
            },
          ],
        },
        {
          name: '顶级菜单',
          handler: () => {
            this.$message.success('点击顶级菜单')
          },
        },
      ],
    }
  },
  methods: {
    ready() {},
  },
}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}
</style>
